import React, { Component } from 'react'
import axios from 'axios'


// axios.get('url').then(res => {
//     res.data
//     this.setState({
//         list: res.data
//     })
// })

// vue  created()  nextTick     mounted()   ssr(服务端渲染)

export default class Life extends Component {
    constructor(props) {
        super(props)
        console.log('我是实例期的第一个生命周期---constructor')
    }
    state = {
        list: []
    }
    // 组件  将要  挂载
    componentWillMount() {
        // ssr  不支持 componentWillMount

        console.log('我是实例期的第二个生命周期---componentWillMount')
        // 终止执行
        // debugger
    }
    render() {
        const { list } = this.state
        console.log('我是实例期的第三个生命周期---render')
        return (
            <div>
                <h3>生命周期</h3>
                {/* <ul>
                    {
                        list.map(item => {
                            return <li key = { item.goods_id }>
                                <img src = { item.image_src } alt="" />
                            </li>
                        })
                    }
                </ul> */}
            </div>
        )
    }
    // 组件  挂载 完成
    componentDidMount() {
        // axios.get('https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata').then(res => {
        //     this.setState({
        //         list: res.data.message
        //     })
        // })
        console.log('我是实例期的第四个生命周期---componentDidMount')
    }
}
